
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @search-reset="searchReset"
        @refresh-change="refreshChange"
        :cell-style="cellStyle"
      >
        <template slot="menuRight">
          <el-button
            type="primary"
            size="mini"
            @click="dialogVisible = true"
          >生成差异报表</el-button>
          <el-upload
            class="upload-inline"
            action=""
            :show-file-list="false"
            accept=".xls,.xlsx"
            :http-request="handleImport"
          >
            <el-button type="primary" size="mini">导入</el-button>
          </el-upload>
          <el-button
            size="mini"
            @click="exportClick"
          >导出</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog
      title="生成差异报表"
      width="500px"
      :visible.sync="dialogVisible"
    >
      <avue-form
        ref="form"
        v-model="generateDiffForm"
        :option="option"
        @submit="submit"
      >
      </avue-form>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, generateDifferenceReport,importAccInvest, dataExport } from '@/api/rca/swckdataauditaccinvest'
import { tableOption, startDate, endDate } from '@/const/crud/rca/swckdataauditaccinvest'
import { handleExcelResponse, getQueryString } from "@/util/util";
import { mapGetters } from 'vuex'

export default {
  name: 'swckdataauditaccinvest',
  data () {
    return {
      searchForm: {
        tradeDate: [startDate, endDate],
        replyDate: [],
      },
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      dialogVisible: false,
      generateDiffForm: {},
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList () {
      return {
      };
    },
    option () {
      return {
        submitText: '确认',
        column: [{
          label: "开始时间",
          prop: "startDate",
          type: "date",
          span: 24,
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          labelWidth: 120,
          placeholder: "请选择开始时间",
          rules: [{
            required: true,
            message: "请选择开始时间",
            trigger: "change"
          }],
        }, {
          label: "结束时间",
          prop: "endDate",
          type: "date",
          span: 24,
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          labelWidth: 120,
          placeholder: "请选择结束时间",
          rules: [{
            required: true,
            message: "请选择结束时间",
            trigger: "change"
          }],
        }]
      }
    },
  },
  methods: {
    cellStyle({ row, column, rowIndex,columnIndex }) {
      
       if(8==columnIndex){
        if (row.bomMoneyDiffAlipy != 0) {
          return {
            color: "red",
          };
        }
       }
       if(9==columnIndex){
        if (row.bomMoneyDiffWechat != 0) {
          return {
            color: "red",
          };
        }
       }
       if(16==columnIndex){
        if (row.tvmMoneyDiffAlipy != 0) {
          return {
            color: "red",
          };
        }
       }
        if(17==columnIndex){
        if (row.tvmMoneyDiffWechat != 0) {
          return {
            color: "red",
          };
        }
       }
        if(18==columnIndex){
        if (row.tvmMoneyDiffUnion != 0) {
          return {
            color: "red",
          };
        }
       }
      
      //只给时间标红
      /*
      if(1==columnIndex){
        if (row.bomMoneyDiffAlipy != 0) {
          return {
            color: "red",
          };
        }
        if (row.bomMoneyDiffWechat != 0) {
          return {
            color: "red",
          };
        }
        if (row.tvmMoneyDiffAlipy != 0) {
          return {
            color: "red",
          };
        }
        if (row.tvmMoneyDiffWechat != 0) {
          return {
            color: "red",
          };
        }
        if (row.tvmMoneyDiffUnion != 0) {
          return {
            color: "red",
          };
        }
      }*/
      
    },
    async getList (page, params) {
      this.tableLoading = true;
      try {
        const [startDate, endDate] = this.searchForm.tradeDate || [];
        const [startReplyDate, endReplyDate] = this.searchForm.replyDate || [];
        const response = await fetchList(Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm,
          { startDate, endDate, startReplyDate, endReplyDate },
        ))
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false;
	      this.$nextTick(() => {
          this.$refs.crud.doLayout();
        });
      } catch (e) {
        this.tableLoading = false;
      };
    },

    async submit (params, done) {
      //点击生成差异报表
      await generateDifferenceReport(params)
        .then(data => {
          this.$message.success('操作成功');
          done()
          this.dialogVisible = false
          this.refreshChange()
        }).catch(error=> {
          if(error.message.indexOf('timeout')!=-1){
            this.$message.warning('生成差异统计报表需要一定时间，请稍后查看!')
            done()
            this.dialogVisible = false
            this.refreshChange()
          }else{
            this.$message.error('操作失败!')
            done()
            this.dialogVisible = false
            this.refreshChange()
          }
        });
    },


    handleImport(item) {//导入
      let file = item.file;
      let param = new FormData();
      param.append("file", file);
      importAccInvest(param).then(() => {
        this.$notify({
          title: "成功",
          message: "导入成功",
          type: "success",
          duration: 2000
        });
        this.refreshChange()
      });
    },
    //导出
    async exportClick (row) {
      this.dataExport();
    },
    async dataExport () {
      const { tradeDate = [] } = this.searchForm;
      const [startReplyDate, endReplyDate] = this.searchForm.replyDate || [];
      const [startDate, endDate] = tradeDate;
      if (!startDate || !endDate) {
        this.$message.error("日期范围不能为空");
        return;
      }
      let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      })
      try {
        const res = await dataExport(Object.assign({}, this.searchForm, { startDate, endDate, startReplyDate, endReplyDate },));
        handleExcelResponse(res);
      } finally {
        loading.close();
      }
    },
    async searchChange (form, done) {
      this.searchForm = { ...form };
      const [startDate, endDate] = this.searchForm.tradeDate || [];
      if (!startDate || !endDate) {
        this.$message.error("日期范围不能为空");
        done();
        return;
      }
      try {
        await this.getList(this.page, this.searchForm);
      } finally {
        done();
      }
    },
    refreshChange () {
      this.getList(this.page)
    },
    searchReset () {
      this.page.currentPage = 1
      this.getList(this.page);
    },
  }
}
</script>
